<template>
    <div>
        <Header :regist="`充值页面`"></Header>
        <div class="w1200 margin marginTop20 whiteBg">
            <div class="padding40 rechargeMain">
                <div class="rechargeList">
                    <span class="rechargeTit">充值方式：</span>
                    <div class="rechargeDetail">
                        <el-tabs v-model="tabRecharge" type="card">
                            <el-tab-pane label="快捷支付" name="first">
                                <div class="rechargeFast" v-if="isBindBankCard">
                                    <span class="rechargeFastTit rechargeFastTit2">银行卡：</span>
                                    <div class="rechargeFastCardBox">
                                        <div class="rechargeCard clearFix">
                                            <span><img src="../../../assets/images/banklogo.png"></span>
                                            <p>***************0928</p>
                                            <font>储蓄卡</font>
                                        </div>
                                        <p>支付限额：单笔50000.00元，当日剩余充值额度：200000.00元</p>
                                    </div>
                                </div>
                                <div class="rechargeFast" v-else>
                                    <span class="rechargeFastTit">银行卡：</span>
                                    <div class="rechargeFastBind">
                                        <router-link to="/bindcard"><font>+</font> 绑定银行卡</router-link>
                                    </div>
                                </div>
                                <div class="rechargeFast">
                                    <span class="rechargeFastTit">充值金额：</span>
                                    <div class="rechargeFastMoney">
                                        <input type="text"> 元
                                    </div>
                                </div>
                                <div class="rechargeFast">
                                    <span class="rechargeNow">立即充值</span>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane label="网银支付" name="second">
                                <div class="rechargeFast">
                                    <span class="rechargeFastTit">充值金额：</span>
                                    <div class="rechargeFastMoney">
                                        <input type="text"> 元
                                    </div>
                                </div>
                                <div class="rechargeFast">
                                    <span class="rechargeNow">立即充值</span>
                                </div>
                                <div class="rechargeTips"><i class="icon iconfont icon-notice"></i>温馨提示：部分银行只支持IE浏览器</div>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Header from '../../common/Head.vue'
    export default {
        components: {
            Header
        },
        data(){
            return {
                tabRecharge: 'first',
                isBindBankCard: false
            }
        }
    }
</script>

<style lang="scss" scoped>
    .rechargeMain{
        height: 420px;
    }
    .rechargeList{
        position: relative;
        .rechargeTit{
            position: absolute;
            left: 0;
            top: 0;
            line-height: 40px;
            display: block;
            width: 80px;
            text-align: right;
        }
        .rechargeFast{
            margin-bottom: 30px;
            position: relative;
            padding-left: 100px;
            .rechargeFastTit{
                position: absolute;
                left: 0;
                top: 0;
                line-height: 40px;
                width: 80px;
                text-align: right;
            }
            .rechargeFastTit2{
                line-height: 50px;
            }
            .rechargeFastBind{
                a{
                    display: block;
                    width: 198px;
                    height: 38px;
                    border: 1px solid #dfdfdf;
                    color: #da5e2d;
                    text-align: center;
                    line-height: 38px;
                    &:hover{
                        background: #da5e2d;
                        border: 1px solid #da5e2d;
                        color: #fff;
                    }
                    font{
                        font-size: 18px;
                    }
                }
            }
            .rechargeFastCardBox{
                .rechargeCard{
                    border: 1px solid #e95412;
                    width: 338px;
                    height: 24px;
                    padding: 12px 20px;
                    margin-bottom: 15px;
                    span{
                        display: block;
                        height: 24px;
                        float: left;
                        img{
                            display: block;;
                            height: 100%;
                        }
                    }
                    p{
                        line-height: 24px;
                        float: left;
                        color: #999;
                        margin: 0 15px;
                    }
                    font{
                        display: block;
                        padding: 0 10px;
                        height: 24px;
                        background: #ccc;
                        color: #fff;
                        float: left;
                        line-height: 24px;
                        border-radius: 3px;
                    }
                }
                p{
                    font-size: 12px;
                    color: #999;
                }
            }
            .rechargeFastMoney{
                line-height: 40px;
                input{
                    height: 38px;
                    line-height: 38px;
                    border: 1px solid #dfdfdf;
                    padding: 0 10px;
                    width: 158px;
                }
            }
            .rechargeNow{
                display: block;
                width: 180px;
                height: 40px;
                background: #e95412;
                font-size: 16px;
                text-align: center;
                line-height: 40px;
                border-radius: 3px;
                color: #fff;
                cursor: pointer;
            }
        }
        .rechargeTips{
            border: 1px solid #f5ea91;
            background: #fffef6;
            color: #bb6c33;
            padding: 10px 20px;
            font-size: 12px;
            margin-top: 180px;
            i{
                color: #f0b158;
                margin-right: 10px;
                float: left;
            }
        }
    }
</style>
<style lang="scss">
    .rechargeDetail{
        .el-tabs--card>.el-tabs__header{
            border: none;
            padding-left: 100px;
            margin-bottom: 30px;
        }
        .el-tabs--card>.el-tabs__header .el-tabs__nav{ border: none; border-radius: 0;}
        .el-tabs__item{
            border: none;
            width: 200px;
            height: 40px;
            line-height: 40px;
            color: #999;
            text-align: center;
            margin-right: 20px;
            background: url(../../../assets/images/product-triangle.png) no-repeat -300px -201px;
            padding: 0;
        }
        .el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
            border: none;
            background: url(../../../assets/images/product-triangle.png) no-repeat -300px -242px;
            color: #e95412;
        }
        .el-tabs--card>.el-tabs__header .el-tabs__item{
            border: none;
        }
        .el-tabs--top.el-tabs--card .el-tabs__item:last-child{ padding: 0;}
    }
</style>